<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>爱帮诊</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <style>
        .yl-table {
            border-collapse: collapse;
            width: 95%;
            margin: 0 auto;
            margin-top: 5%;
            margin-bottom: 5%;
            text-align: center;
            border-bottom: hidden;
            border-top: hidden;
            border-left: hidden;
            border-right: hidden;
        }

        .yl-table td {
            border: solid 2px #F2F2F2;
        }

        .yl-input {
            width: 80%;
            opacity: 0.7;
            /*background-color: transparent;*/
            border: #ffffff 1px solid;
            border-radius: 4px;
            margin: 0 auto;
        }

        .yl-sub {
            background-color: transparent;
            border: 0;
            color: #fff;
        }

        .yl-td {
            width: 50%;
        }

        .yl-div-list {
            float: left;
            width: 50%;
            height: 120px;
            padding: 0 10px 0 10px;
            margin-top: 10px;
        }

        .yl-img-list {
            width: 100%;
        }

        .yl-p-list {
            margin-bottom: 0;
            font-size: 12px;
        }

        .yl-p-list2 {
            margin-top: 0;
            font-size: 14px;
        }

        .yl-hr {
            margin-bottom: 0;
            border: solid #F2F2F2 5px;
        }

        .yl-div-list2 {
            margin-top: 10px;
        }

        .yl-span-list {
            color: #b05c5b;
        }

        .yl-a-list {
            float: right;
            color: #E0CF86;
        }
    </style>
</head>
<body>
<!-- Header -->
<header data-am-widget="header" class="am-header am-header-default">
    <div class="yl-head-div">
        <input type="text" class="yl-input" placeholder="请输入搜索内容"/>
        <input type="button" value="取消" class="yl-sub"/>
    </div>
</header>

<div id="no-data" style="text-align: center; display: none;">暂无数据</div>

<!--标题栏-->
<!--<table class="yl-table">-->
    <!--<tr>-->
        <!--<td class="yl-td">热门推荐</td>-->
        <!--<td class="yl-td">筛选</td>-->
    <!--</tr>-->
<!--</table>-->
<!--end-->

<!--内容列表-->
<div class="ajaxList">
    <!--<div>-->
        <!--<hr class="yl-hr"/>-->
        <!--<div class="am-g">-->
            <!--<div class="am-u-sm-4">-->
                <!--<img src="__PUBLIC__/img/travel/{$da.img}" class="yl-img-list"/>-->
            <!--</div>-->
            <!--<div class="am-u-sm-8">-->
                <!--<h5>{$da.name}</h5>-->

                <!--<p class="yl-p-list">{$da.intro}</p>-->

                <!--<p class="yl-p-list2">-->
                    <!--<span class="yl-span-list">{$da.price}</span>-->
                    <!--<a class="yl-a-list" href="__URL__/traDetail/id/{$da.tid}">详情>></a>-->
                <!--</p>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

</div>

<!--end-->

<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script>
    $(function(){
        $(".yl-input").focus();
        $(".am-g").click(function(){
            window.location = $(this).find("a").attr("href");
            return false;
        });
    });

    $(".yl-sub").on("click",function () {
        window.location.href = "{:U('Index/index')}";
    })

    $(".yl-input").change(function () {

        var name = $(".yl-input").val();
        $("#no-data").css("display","none");
        $(".ajaxList").empty();

        $.ajax({
            url:"{:U('User/searchName')}",
            type:"post",
            data:{name:name},
            dataType:"json",
            success:function (res) {
                if(res.code != 0){
                    $("#no-data").css("display","block");
                    return false;
                }

//                遍历数据
                $.each(res.data,function (key,value) {
                    $(".ajaxList").append('<div>'+
                        '<hr class="yl-hr"/>'+
                        '<div class="am-g">'+
                        '<div class="am-u-sm-4">'+
                        '<img src='+value.img+' class="yl-img-list"/>'+
                        '</div>'+
                        '<div class="am-u-sm-8">'+
                        '<h5>'+value.name+'</h5>'+

                    '<p class="yl-p-list">'+value.hospital+'</p>'+

                    '<p class="yl-p-list2">'+
                        '<span class="yl-span-list">'+value.dept_name+'</span>'+
                    '<a class="yl-a-list" href="{:U(\"Index/mingyuyue\")}">预约>></a>'+
                        '</p>'+
                        '</div>'+
                        '</div>'+
                        '</div>');
                })

            }
        })
    });
</script>
</body>
</html>
